<template>
  <div>
    <div class="wel__header">
      <div class="wel__info">
        <img src="/static/img/a9.jpg" alt="" class="wel__info-img">
        <div class="wel__info-content">
          <div class="wel__info-title">
            <!-- {{userInfo.realname}} -->
            您好，
            <span style="color:rgb(63, 161, 255);;font-size: 22px;
      font-weight: 500;"> 张玉洁 </span>
            ，美好的一天又开始了
          </div>
          <div class="wel__info-subtitle">
            潍坊农商银行奎文支行-风险管理部
          </div>
        </div>
      </div>
      <div class="wel__extra">
        <!-- <div class="wel__extra-item">
          <p class="wel__extra-title">
            我的企业
          </p>
          <p class="wel__extra-subtitle">
            56
          </p>
        </div> -->
        <div class="wel__extra-item" @click="box=true">
          <p class="wel__extra-title">
            普惠金融指数
          </p>
          <p class="wel__extra-subtitle">
            76
          </p>
        </div>
        <div class="wel__extra-item" @click="box1=true">
          <p class="wel__extra-title">
            排名
          </p>
          <p class="wel__extra-subtitle">
            8
            <span>/ 24</span>
          </p>
        </div>
        <div class="wel__extra-item" @click="box2=true">
          <p class="wel__extra-title">
            企业贡献指数
          </p>
          <p class="wel__extra-subtitle">
            68
          </p>
        </div>
        <div class="wel__extra-item" @click="box1=true">
          <p class="wel__extra-title">
            排名
          </p>
          <p class="wel__extra-subtitle">
            12
            <span>/ 24</span>
          </p>
        </div>
      </div>
    </div>
    <basic-container>
      <avue-data-icons :option="option5"></avue-data-icons>
    </basic-container>
    <basic-container>
      <avue-data-box :option="option1"></avue-data-box>
    </basic-container>

    <basic-container>
      <avue-crud :option="option4" :data="data">
      </avue-crud>
    </basic-container>
    <el-dialog title="普惠金融指数" :visible.sync="box" width="85%">
      <avue-crud :option="pujr" :data="pujrData">
      </avue-crud>
    </el-dialog>
    <el-dialog title="企业贡献指数" :visible.sync="box2" width="85%">
      <avue-crud :option="gxd" :data="gxdData">
      </avue-crud>
    </el-dialog>
    <el-dialog title="排名" :visible.sync="box1" width="70%">
      <avue-crud :option="option7" :data="data3">
      </avue-crud>
    </el-dialog>

  </div>
</template>

<script>
import kehu from './data/kehu'
import { pujrData, pujr, gxd, gxdData } from './report/options.js'
import { mapGetters } from 'vuex'
export default {
  name: 'wel',
  components: {
    kehu
  },
  data() {
    return {
      pujrData: pujrData,
      pujr: pujr,
      gxd: gxd,
      gxdData: gxdData,
      box: false,
      box1: false,
      box2: false,
      option7: {
        index: true,
        border: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        header: false,
        align: 'center',
        column: [
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '所属支行',
            prop: 'zh'
          },

          {
            label: '管理园区数',
            prop: 'yq'
          },
          {
            label: '管理企业数',
            prop: 'qy'
          },

          {
            label: '普惠金融指数',
            prop: 'zs'
          },
          {
            label: '排名',
            prop: 'phpm'
          },
          {
            label: '企业贡献度',
            prop: 'gxd'
          },
          {
            label: '排名',
            prop: 'gxdpm'
          }
        ]
      },
      data3: [
        {
          name: '张健康',
          yq: 6,
          qy: 169,
          zh: '高新支行',
          zs: 76,
          gxd: 68,
          phpm: 1,
          gxdpm: 2
        },
        {
          name: '李可可',
          yq: 3,
          qy: 131,
          zh: '寒亭支行',
          zs: 67,
          gxd: 72,
          phpm: 2,
          gxdpm: 1
        },
        {
          name: '王丹丹',
          yq: 1,
          qy: 20,
          zh: '奎文支行',
          zs: 56,
          gxd: 42,
          phpm: 3,
          gxdpm: 3
        }
      ],
      data5: [
        {
          name: '奎文区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '高新区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '潍城区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '寒亭区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '坊子区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '潍城区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '寒亭区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '坊子区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        }
      ],
      option5: {
        span: 3,
        discount: true,
        data: [
          {
            title: '我的企业',
            count: '268',
            icon: 'icon-qiye',
            href: '/#/data/company_search'
          },
          {
            title: '企业贷款',
            count: '50 / 100',
            icon: 'icon-weituodaikuanhuankuan'
          },
          {
            title: '随薪贷',
            count: '30 / 290 / 15',
            icon: 'icon-gongziqiarenzheng'
          },
          {
            title: '存款日均',
            count: '68 / 120',
            icon: 'icon-cunkuan_o'
          },
          // {
          //   title: '存款归行率(%)',
          //   count: 35,
          //   icon: 'icon-ziyuanldpi'
          // },
          {
            title: '代发工资',
            count: '69 / 69',
            icon: 'icon-gongziqiarenzheng'
          },
          {
            title: '手机银行开户数',
            count: '36',
            icon: 'icon-shouji'
          },
          {
            title: '调查问卷',
            icon: 'icon-tiaochawenjuan',
            href: '/#/data/quest',
            count: 1
          },
          {
            title: '分析报告',
            icon: 'icon-group53',
            href: '/#/report/report_enter',
            count: 4
          }
        ]
      },
      option4: {
        index: true,
        column: [
          {
            label: '工作任务',
            prop: 'rw'
          },
          {
            width: 500,
            label: '工作内容',
            prop: 'nr',
            overHidden: true
          },
          {
            label: '工作时间',
            prop: 'sj'
          }
        ]
      },
      option6: {
        header: false,
        index: true,
        align: 'center',
        addBtn: false,
        height: 400,
        editBtn: false,
        delBtn: false,
        menu: false,
        column: [
          {
            label: '信贷普惠金融',
            prop: 'xdzs',
            align: 'center',
            children: [
              {
                label: '排名',
                prop: 'xdpm'
              },
              // {
              //   label: '建档户数',
              //   prop: 'jdhs'
              // },
              {
                align: 'center',
                label: '建档率',
                prop: 'jdl'
              },
              // {
              //   label: '签约户数',
              //   prop: 'qyhs'
              // },
              {
                align: 'center',
                label: '签约率',
                prop: 'qyl'
              },
              // {
              //   label: '授信户数',
              //   prop: 'sxhs'
              // },
              {
                align: 'center',
                label: '授信率',
                prop: 'sxl'
              },
              // {
              //   label: '用信户数',
              //   prop: 'yxhs'
              // },
              {
                label: '用信率',
                prop: 'yxl'
              },
              {
                align: 'center',
                label: '得分',
                prop: 'xddf'
              }
            ]
          },
          {
            label: '中间业务',
            prop: 'xdzs',
            children: [
              {
                label: '排名',
                prop: 'zjpm'
              },

              {
                label: '金额',
                prop: 'zjje',
                href: '/#/ddd'
              },
              {
                label: '得分',
                prop: 'zjdf'
              }
            ]
          },
          {
            label: '结算',
            prop: 'xdzs',
            children: [
              {
                label: '排名',
                prop: 'dkpm'
              },
              {
                label: '存款日均',
                prop: 'ckrj'
              },
              {
                label: '贷款金额',
                prop: 'dkje'
              },
              {
                label: '得分',
                prop: 'dkdf'
              }
            ]
          },
          {
            label: '总得分',
            prop: 'zdf'
          }
        ]
      },
      data: [
        {
          rw: '授信已过期',
          nr: '云集汇通"随薪贷"授信已过期，请及时处理',
          sj: '2018-12-24'
        },
        {
          rw: '代发工资异常',
          nr: '家居服公司代发工资出现异常，请及时处理',
          sj: '2019-01-05'
        },
        {
          rw: '处理蜂鸟智能高管离职',
          nr: '蜂鸟智能高管离职，属于可控事件',
          sj: '2019-01-01'
        }
      ],
      data2: [
        {
          jdl: '100%',
          qyl: '90%',
          sxl: '43%',
          yxl: '21%',
          xddf: '34',
          xdpm: '3',
          zjje: '300',
          zjpm: '6',
          zjdf: '16',
          dkpm: '6',
          dkdf: '26',
          dkje: '630',
          ckrj: '46',
          zdf: '76'
        }
      ],
      option3: {
        span: 8,
        data: [
          {
            title: '贷款企业率（日同比 28%）',
            color: 'rgb(178, 159, 255)',
            count: 32,
            href: 'https://avue.top',
            target: '_blank'
          },
          {
            title: '企业入驻率（日同比 11%）',
            color: 'rgb(230, 71, 88)',
            count: 32,
            href: 'https://avue.top',
            target: '_blank'
          },
          {
            title: '不良企业率（日同比 11%）',
            color: 'rgb(230, 71, 88)',
            count: 32,
            href: 'https://avue.top',
            target: '_blank'
          }
        ]
      },
      option2: {
        span: 12,
        data: [
          {
            title: '代办事项',
            count: 4,
            icon: 'el-icon-tickets',
            href: 'https://avue.top',
            target: '_blank'
          },
          {
            title: '我的任务',
            count: 3,
            icon: 'el-icon-success',
            href: 'https://avue.top',
            target: '_blank'
          },
          {
            title: '异常通知',
            count: 3,
            icon: 'el-icon-info',
            href: '/#/zhgl/report_worning_park'
          },
          {
            title: '我的消息',
            count: 12,
            icon: 'el-icon-message',
            href: 'https://avue.top',
            target: '_blank'
          }
        ]
      },
      option1: {
        span: 6,
        data: [
          {
            title: '我的网格',
            count: 33,
            icon: 'el-icon-view',
            color: 'rgb(49, 180, 141)',
            href: '/#/data/park'
          },
          {
            title: '异常通知',
            count: 3,
            icon: 'el-icon-warning',
            color: 'rgb(230, 71, 88)',
            href: '/#/zhgl/report_worning_park'
          },
          // {
          //   title: '待办事项',
          //   count: 6,
          //   icon: 'el-icon-message',
          //   color: 'rgb(56, 161, 242)',
          //   href: '/#/report/report_todo'
          // },
          {
            title: '信息查询',
            icon: 'el-icon-message',
            color: 'rgb(63, 56, 255)',
            href: '/#/zhgl/report_park'
          },
          {
            title: '精准营销',
            icon: 'icon-shujuzhanshi2',
            color: 'rgb(117, 56, 199)',
            href: '/#/zhgl/report_marketing_park'
          }
        ]
      },
      option: {
        span: 4,
        data: [
          {
            count: '1,360',
            title: '我的企业',
            href: '/#/data/company_search'
          },
          {
            count: '13,650',
            title: '贷款金额'
          },
          {
            count: '3,125',
            title: '随薪贷'
          },
          {
            count: '13,040',
            title: '存款日均'
          },
          {
            count: '43,300',
            title: '代发工资'
          },
          {
            count: '5,760',
            title: '手机银行开户数'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {},
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '最终得分'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = parseFloat(sums[index] / 3).toFixed(2)
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.wel {
  &__header {
    padding: 25px 40px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__info {
    display: flex;
    align-items: center;
    &-img {
      border-radius: 72px;
      display: block;
      width: 72px;
      height: 72px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    &-content {
      position: relative;
      margin-left: 24px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
    &-title {
      font-size: 18px;
      line-height: 28px;
      font-weight: 100;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }
    &-subtitle {
      position: relative;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
  }
  &__extra {
    &-item {
      position: relative;
      padding: 0 32px;
      display: inline-block;
      &:last-child {
        &::after {
          display: none;
        }
      }
      &:after {
        background-color: #e8e8e8;
        position: absolute;
        top: 30px;
        right: 0;
        width: 1px;
        height: 40px;
        content: '';
      }
    }
    &-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
      text-align: center;
    }
    &-subtitle {
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      line-height: 38px;
      margin: 0;
      padding-left: 5px;
      text-align: center;
      span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
      }
    }
  }
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;
    .icon {
      margin-right: 5px;
      display: inline-block;
      vertical-align: middle;
    }
    .name {
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: middle;
    }
    .addr {
      padding-top: 5px;
      width: 100%;
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>